<!DOCTYPE>
<html>
<head>
    <mata name="viewport" content="width=device-width,initial-scale=1"></mata>
<body>
<input id="file" type="file">

<script src="http://itphy.com/cdn/jquery/jquery.js"></script>
<script>
    const ImgSmall={
        reader: new FileReader(),
        img: new Image(),
        fileObj: new FormData(),
        url:"",
        finishFunction: function (){},
        save: function (){
            let $this=this;
            $.ajax({
                url: $this.url,
                type: 'POST',
                cache: false,
                data: $this.fileObj,
                processData: false,
                contentType: false,
                success: function (result) {
                    typeof ($this.finishFunction)=='function'?$this.finishFunction(result.data):1==1;
                }
            });
        },
        toBlob: function (file){
            let $this=this;
            $this.img.onload=function (e){
                let canvas = document.createElement('canvas');
                let context = canvas.getContext('2d');
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = 400, maxHeight = 400;
                // 目标尺寸
                var targetWidth = originWidth, targetHeight = originHeight;
                // 图片尺寸超过400x400的限制
                if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                        // 更宽，按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }

                // canvas对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage($this.img, 0, 0, targetWidth, targetHeight);
                // canvas转为blob并上传
                canvas.toBlob(function (blob) {
                    $this.fileObj.append("file",blob);
                    $this.save()
                }, file.type || 'image/png');
            }
            $this.reader.onload = function (e) {
                $this.img.src = e.target.result;
            };
            $this.reader.readAsDataURL(file);
        },
        upload: function (e,finishFunction){
            this.url=e.url;
            this.finishFunction=finishFunction;
            this.toBlob(e.file);
        }
    }
    $(function (){
        $("#file").change(function (){
            let app=$(this);
            ImgSmall.upload({
                file: this.files[0],
                url: "/oss"
            },(r)=>{
                app.empty();
                console.log(r)
            })
        })
    })
</script>
</body>
</html>
